<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过js获取元素的位置 </title>
</head>
<body>
    
</body>
</html>
<script>
    //offsetWidth/offsetHeight,clientWidth/clientHeight 与 scrollWidth/scrollHeight 的区别？ 

    //clientWidth/clientHeight 返回的是元素的内部宽度，它的值只包含 content + padding，如果有滚动条，不包含滚动条。
    // clientTop    返回的是上边框的宽度。
    // clientLeft   返回的左边框的宽度。

    // offsetWidth/offsetHeight 返回的是元素的布局宽度，它的值包含 content + padding + border 包含了滚动条。
    // offsetTop                返回的是当前元素相对于其 offsetParent 元素的顶部的距离。
    // offsetLeft               返回的是当前元素相对于其 offsetParent 元素的左部的距离。

    // scrollWidth/scrollHeight 返回值包含 content + padding + 溢出内容的尺寸。
    // scrollTop                属性返回的是一个元素的内容垂直滚动的像素数。
    // scrollLeft               属性返回的是元素滚动条到元素左边的距离。





</script>